<template>
  <div v-loading="loading">
    <div>
      <el-breadcrumb separator="/">
        <el-breadcrumb-item>亿码互联管理系统</el-breadcrumb-item>
        <el-breadcrumb-item> 扫码统计 </el-breadcrumb-item>
      </el-breadcrumb>
    </div>
    <div class="mt-4">
      <el-row gutter="20">
        <el-col :span="16">
          <el-row gutter="20">
            <el-col :span="12">
              <div class="border p-2 mb-4 shadow-xl">
                <el-row>
                  <el-col :span="12">
                    <div v-if="ishow" ref="chartDom" style="width: 100%; height: 300px"></div>
                    <div v-else class="p-1" style="width: 100%; height: 300px">
                      <div style="font-size: 18px; font-weight: 800">昨日扫码统计</div>
                      <div
                        style="width: 100%; height: 220px; margin-top: 20px"
                        class="flex justify-center items-center bg-gray-200"
                      >
                        暂无数据
                      </div>
                    </div>
                  </el-col>
                  <el-col :span="12">
                    <div v-if="ishowip" ref="chartDomip" style="width: 100%; height: 300px"></div>
                    <div v-else class="p-1" style="width: 100%; height: 300px">
                      <div style="font-size: 18px; font-weight: 800">地域分布</div>
                      <div
                        style="width: 100%; height: 220px; margin-top: 20px"
                        class="flex justify-center items-center bg-gray-200"
                      >
                        暂无数据
                      </div>
                    </div>
                  </el-col>
                </el-row>
              </div>
            </el-col>
            <el-col :span="12">
              <div class="border p-2 mb-4 shadow-xl">
                <el-row>
                  <el-col :span="12">
                    <div v-if="ishow1" ref="chartDom1" style="width: 100%; height: 300px"></div>
                    <div v-else class="p-1" style="width: 100%; height: 300px">
                      <div style="font-size: 18px; font-weight: 800">今日扫码统计</div>
                      <div
                        style="width: 100%; height: 220px; margin-top: 20px"
                        class="flex justify-center items-center bg-gray-200"
                      >
                        暂无数据
                      </div>
                    </div>
                  </el-col>
                  <el-col :span="12">
                    <div v-if="ishowip1" ref="chartDomip1" style="width: 100%; height: 300px"></div>
                    <div v-else class="p-1" style="width: 100%; height: 300px">
                      <div style="font-size: 18px; font-weight: 800">地域分布</div>
                      <div
                        style="width: 100%; height: 220px; margin-top: 20px"
                        class="flex justify-center items-center bg-gray-200"
                      >
                        暂无数据
                      </div>
                    </div>
                  </el-col>
                </el-row>
              </div>
            </el-col>
          </el-row>
          <el-row gutter="20">
            <el-col :span="12">
              <div class="border p-2 mb-4 shadow-xl">
                <el-row>
                  <el-col :span="12"
                    ><div v-if="ishow2" ref="chartDom2" style="width: 100%; height: 300px"></div>
                    <div v-else class="p-1" style="width: 100%; height: 300px">
                      <div style="font-size: 18px; font-weight: 800">30天内扫码统计</div>
                      <div
                        style="width: 100%; height: 220px; margin-top: 20px"
                        class="flex justify-center items-center bg-gray-200"
                      >
                        暂无数据
                      </div>
                    </div></el-col
                  >
                  <el-col :span="12">
                    <div v-if="ishowip2" ref="chartDomip2" style="width: 100%; height: 300px"></div>
                    <div v-else class="p-1" style="width: 100%; height: 300px">
                      <div style="font-size: 18px; font-weight: 800">地域分布</div>
                      <div
                        style="width: 100%; height: 220px; margin-top: 20px"
                        class="flex justify-center items-center bg-gray-200"
                      >
                        暂无数据
                      </div>
                    </div>
                  </el-col>
                </el-row>
              </div>
            </el-col>
            <el-col :span="12">
              <div class="border p-2 mb-4 shadow-xl">
                <el-row>
                  <el-col :span="12"
                    ><div v-if="ishow3" ref="chartDom3" style="width: 100%; height: 300px"></div>
                    <div v-else class="p-1" style="width: 100%; height: 300px">
                      <div style="font-size: 18px; font-weight: 800">一年内扫码统计</div>
                      <div
                        style="width: 100%; height: 220px; margin-top: 20px"
                        class="flex justify-center items-center bg-gray-200"
                      >
                        暂无数据
                      </div>
                    </div></el-col
                  >
                  <el-col :span="12">
                    <div v-if="ishowip3" ref="chartDomip3" style="width: 100%; height: 300px"></div>
                    <div v-else class="p-1" style="width: 100%; height: 300px">
                      <div style="font-size: 18px; font-weight: 800">地域分布</div>
                      <div
                        style="width: 100%; height: 220px; margin-top: 20px"
                        class="flex justify-center items-center bg-gray-200"
                      >
                        暂无数据
                      </div>
                    </div>
                  </el-col>
                </el-row>
              </div>
            </el-col>
          </el-row>
        </el-col>
        <el-col :span="8">
          <div class="border p-2 mb-4 shadow-xl" style="height: 63.5vh; overflow: scroll">
            <el-table :data="chartData3" stripe style="width: 100%">
              <el-table-column label="二维码名称">
                <template #default="scope">
                  <div>{{ scope.row.eqTitle === null ? '未知' : `${scope.row.eqTitle}` }}</div>
                </template>
              </el-table-column>
              <el-table-column prop="eqScanCnt" label="扫描次数" width="80" />
              <el-table-column prop="eqScanUserCnt" label="扫码人数" width="80" />
            </el-table>
          </div>
        </el-col>
      </el-row>
    </div>
  </div>
</template>

<script setup>
import { ref, reactive, toRefs, onMounted } from 'vue';
import { useRoute } from 'vue-router';
import * as echarts from 'echarts';
import ECharts from 'vue-echarts';
import { i57_codescanrecord_report, i62_ipregion_scancode, getQrcodebytype } from '@/api/index.js';
// const showToast = inject("showToast");
const loading = ref(true);
loading.value = false;

// 创建一个响应式引用来保存DOM元素
const chartDom = ref(null);
const chartDom1 = ref(null);
const chartDom2 = ref(null);
const chartDom3 = ref(null);

const chartDomip = ref(null);
const chartDomip1 = ref(null);
const chartDomip2 = ref(null);
const chartDomip3 = ref(null);

let chartInstance = null;
let chartInstance1 = null;
let chartInstance2 = null;
let chartInstance3 = null;

let chartInstanceip = null;
let chartInstanceip1 = null;
let chartInstanceip2 = null;
let chartInstanceip3 = null;

let ishow = ref(true);
let ishow1 = ref(true);
let ishow2 = ref(true);
let ishow3 = ref(true);

let ishowip = ref(true);
let ishowip1 = ref(true);
let ishowip2 = ref(true);
let ishowip3 = ref(true);

const chartData3 = ref([]);
// 初始化ECharts实例并设置配置项（这里以折线图为例，但可灵活替换）
onMounted(async () => {
  await nextTick(); // 确保DOM已经渲染完成

  i57_codescanrecord_report(0).then((res) => {
    console.log('res', res);
    let categories = [];

    const series_data = [];

    res.data.data.listdata.forEach((item) => {
      categories.push(item.scanHour);
      series_data.push(item.scanCount);
    });
    chartInstance = echarts.init(chartDom.value);
    const option = {
      // 这里是ECharts的配置项，可以根据需要绘制不同类型的图表
      title: {
        text: '昨日扫码统计',
      },
      tooltip: {},
      xAxis: {
        data: categories,
      },
      yAxis: {},
      series: [
        {
          name: '数据系列',
          type: 'line', // 这里可以是'line'、'bar'、'pie'等，根据图表类型选择
          data: series_data,
        },
      ],
    };
    chartInstance.setOption(option);
    if (series_data.length === 0) {
      ishow.value = false;
    }
  });
  i57_codescanrecord_report(1).then((res) => {
    console.log('res', res);
    let categories = [];

    const series_data = [];

    res.data.data.listdata.forEach((item) => {
      categories.push(item.scanHour);
      series_data.push(item.scanCount);
    });
    chartInstance1 = echarts.init(chartDom1.value);
    const option = {
      // 这里是ECharts的配置项，可以根据需要绘制不同类型的图表
      title: {
        text: '今日日扫码统计',
      },
      tooltip: {},
      xAxis: {
        data: categories,
      },
      yAxis: {},
      series: [
        {
          name: '数据系列',
          type: 'line', // 这里可以是'line'、'bar'、'pie'等，根据图表类型选择
          data: series_data,
        },
      ],
    };

    chartInstance1.setOption(option);
    if (series_data.length === 0) {
      ishow1.value = false;
    }
  });
  i57_codescanrecord_report(2).then((res) => {
    console.log('res', res);
    let categories = [];

    const series_data = [];

    res.data.data.listdata.forEach((item) => {
      categories.push(`   ${item.scanDay.substring(5, 10)}  `);
      series_data.push(item.scanCount);
    });
    chartInstance2 = echarts.init(chartDom2.value);
    const option = {
      // 这里是ECharts的配置项，可以根据需要绘制不同类型的图表
      title: {
        text: '30天内扫码统计',
      },
      tooltip: {},
      xAxis: {
        data: categories,
      },
      yAxis: {},
      series: [
        {
          name: '数据系列',
          type: 'line', // 这里可以是'line'、'bar'、'pie'等，根据图表类型选择
          data: series_data,
        },
      ],
    };
    chartInstance2.setOption(option);
    if (series_data.length === 0) {
      ishow2.value = false;
    }
  });
  i57_codescanrecord_report(3).then((res) => {
    console.log('res', res);
    let categories = [];

    const series_data = [];

    res.data.data.listdata.forEach((item) => {
      categories.push(item.scanMonth);
      series_data.push(item.scanCount);
    });
    chartInstance3 = echarts.init(chartDom3.value);
    const option = {
      // 这里是ECharts的配置项，可以根据需要绘制不同类型的图表
      title: {
        text: '一年内扫码统计',
      },
      tooltip: {},
      xAxis: {
        data: categories,
      },
      yAxis: {},
      series: [
        {
          name: '数据系列',
          type: 'line', // 这里可以是'line'、'bar'、'pie'等，根据图表类型选择
          data: series_data,
        },
      ],
    };
    chartInstance3.setOption(option);
    if (series_data.length === 0) {
      ishow3.value = false;
    }
  });
  i62_ipregion_scancode(0).then((res) => {
    console.log('res:', res);
    const series_data = [];
    res.data.data.listdata.forEach((item) => {
      console.log(':', item.userIp);
      series_data.push({
        name: item.ipRegionName ? item.ipRegionName : '未知',
        value: item.scanCount,
      });
    });
    chartInstanceip = echarts.init(chartDomip.value);
    const option = {
      title: {
        text: '地域分布',
      },
      tooltip: {
        trigger: 'item',
      },
      legend: {
        bottom: '0%',
        left: 'center',
      },
      series: [
        {
          name: '扫码次数',
          type: 'pie',
          radius: ['40%', '70%'],
          avoidLabelOverlap: false,
          itemStyle: {
            borderRadius: 10,
            borderColor: '#fff',
            borderWidth: 2,
          },
          label: {
            show: false,
            position: 'center',
          },
          emphasis: {
            label: {
              show: true,
              fontSize: 20,
              fontWeight: 'bold',
            },
          },
          labelLine: {
            show: false,
          },
          data: series_data,
        },
      ],
    };
    chartInstanceip.setOption(option);
    if (series_data.length === 0) {
      ishowip.value = false;
    }
  });
  i62_ipregion_scancode(1).then((res) => {
    console.log('res:', res);
    const series_data = [];
    res.data.data.listdata.forEach((item) => {
      console.log(':', item.userIp);
      series_data.push({
        name: item.ipRegionName ? item.ipRegionName : '未知',
        value: item.scanCount,
      });
    });
    chartInstanceip1 = echarts.init(chartDomip1.value);
    const option = {
      title: {
        text: '地域分布',
      },
      tooltip: {
        trigger: 'item',
      },
      legend: {
        bottom: '0%',
        left: 'center',
      },
      series: [
        {
          name: '扫码次数',
          type: 'pie',
          radius: ['40%', '70%'],
          avoidLabelOverlap: false,
          itemStyle: {
            borderRadius: 10,
            borderColor: '#fff',
            borderWidth: 2,
          },
          label: {
            show: false,
            position: 'center',
          },
          emphasis: {
            label: {
              show: true,
              fontSize: 20,
              fontWeight: 'bold',
            },
          },
          labelLine: {
            show: false,
          },
          data: series_data,
        },
      ],
    };
    chartInstanceip1.setOption(option);
    if (series_data.length === 0) {
      ishowip1.value = false;
    }
  });
  i62_ipregion_scancode(2).then((res) => {
    console.log('res:', res);
    const series_data = [];
    res.data.data.listdata.forEach((item) => {
      console.log(':', item.userIp);
      series_data.push({
        name: item.ipRegionName ? item.ipRegionName : '未知',
        value: item.scanCount,
      });
    });
    chartInstanceip2 = echarts.init(chartDomip2.value);
    const option = {
      title: {
        text: '地域分布',
      },
      tooltip: {
        trigger: 'item',
      },
      legend: {
        bottom: '0%',
        left: 'center',
      },
      series: [
        {
          name: '扫码次数',
          type: 'pie',
          radius: ['40%', '70%'],
          avoidLabelOverlap: false,
          itemStyle: {
            borderRadius: 10,
            borderColor: '#fff',
            borderWidth: 2,
          },
          label: {
            show: false,
            position: 'center',
          },
          emphasis: {
            label: {
              show: true,
              fontSize: 20,
              fontWeight: 'bold',
            },
          },
          labelLine: {
            show: false,
          },
          data: series_data,
        },
      ],
    };
    chartInstanceip2.setOption(option);
    if (series_data.length === 0) {
      ishowip2.value = false;
    }
  });
  i62_ipregion_scancode(3).then((res) => {
    console.log('res:', res);
    const series_data = [];
    res.data.data.listdata.forEach((item) => {
      console.log(':', item.userIp);
      series_data.push({
        name: item.ipRegionName ? item.ipRegionName : '未知',
        value: item.scanCount,
      });
    });
    chartInstanceip3 = echarts.init(chartDomip3.value);
    const option = {
      title: {
        text: '地域分布',
      },
      tooltip: {
        trigger: 'item',
      },
      legend: {
        bottom: '0%',
        left: 'center',
      },
      series: [
        {
          name: '扫码次数',
          type: 'pie',
          radius: ['40%', '70%'],
          avoidLabelOverlap: false,
          itemStyle: {
            borderRadius: 10,
            borderColor: '#fff',
            borderWidth: 2,
          },
          label: {
            show: false,
            position: 'center',
          },
          emphasis: {
            label: {
              show: true,
              fontSize: 20,
              fontWeight: 'bold',
            },
          },
          labelLine: {
            show: false,
          },
          data: series_data,
        },
      ],
    };
    chartInstanceip3.setOption(option);
    if (series_data.length === 0) {
      ishowip3.value = false;
    }
  });
  getQrcodebytype('').then((res) => {
    console.log('res:', res);
    chartData3.value = res.data.data.listdata;
    chartData3.value.forEach((item) => {
      if (item.eqType === 2) {
        const j = JSON.parse(item.eqJson);
        // console.log('j', j)
        j.name === undefined ? (j.name = '电子名片') : (j.name = `${j.name}的电子名片`);
        item.eqTitle = j.name;
      }
    });
  });
});

onUnmounted(() => {
  if (chartInstance != null && chartInstance.dispose) {
    chartInstance.dispose();
  }
});
</script>
<style scoped lang="less"></style>

